<template>
  <div class="ZLdetails">
    <detail-top
      class="ZLdetailsTop"
      :titles="titles"
      @titleSwitch="titleSwitch"
      ref="top"
    ></detail-top>
    <b-scroll class="ZLscroll" ref="bScroll" :probeType="3" @getPosition="getPosition">
      <detail-swiper :detailBanner="detailBanner" @detailSwiperImgLoad="detailSwiperImgLoad"></detail-swiper>
      <detail-info :detailGoodsInfo="detailGoodsInfo"></detail-info>
      <detail-shop :detailShopInfo="detailShopInfo"></detail-shop>
      <detail-image
        :detailImage="detailImage"
        :detailImageDesc="detailImageDesc"
        @detailImgLoad="detailImgLoad"
      ></detail-image>
      <detail-params :detailItemParams="detailItemParams" ref="params"></detail-params>
      <detail-rate :detailRate="detailRate" ref="rate"></detail-rate>
      <goods-list :goodsList="detailRecommend" ref="list"></goods-list>
    </b-scroll>
		<detail-bottom :addCartsfo="addCartsfo"></detail-bottom>
    <back-top class="homeBacktop" @click.native="backTop" v-show="backIsshow"></back-top>
  </div>
</template>

<script>
import DetailTop from "./childcomps/DetailTop";
import DetailSwiper from "./childcomps/DetailSwiper";
import DetailInfo from "./childcomps/DetailInfo";
import DetailShop from "./childcomps/DetailShop";
import DetailImage from "./childcomps/DetailImage";
import DetailParams from "./childcomps/DetailParams";
import DetailRate from "./childcomps/DetailRate";
import DetailBottom from "./childcomps/DetailBottom";

import GoodsList from "components/context/goods/GoodsList";
import BScroll from "components/common/bscroll/BScroll";
import BackTop from "components/context/backtop/BackTop";

import { listenerItemMixin } from "common/mixin";
import {
  getDetailData,
  getRecommendData,
  Goodsinfo,
	Shopinfo,
	AddcartInfo
} from "networks/details";

export default {
  name: "Details",
  components: {
    DetailTop,
    DetailSwiper,
    DetailInfo,
    DetailShop,
    DetailImage,
    DetailParams,
		DetailRate,
		DetailBottom,
    GoodsList,
    BScroll,
    BackTop
  },
  mixins: [listenerItemMixin],
  data() {
    return {
			// titles:['商品','参数','评论','推荐'],
			titles:['详情页'],
			titlesCss:true,
      iid: null,
      detailInfo: null,
      detailBanner: [],
      detailGoodsInfo: {},
      detailShopInfo: {},
      detailImage: [],
      detailImageDesc: "",
      detailItemParams: {},
      detailRate: {},
      detailRecommend: [],
      titleSwitchYs: [],
      bsPositionY: "",
      titleCurrentIndex: 0,
			backIsshow: false,
			addCartsfo:{}
    };
  },
  methods: {
    /**
     * 网络请求相关的方法
     */
    // 请求详情页推荐商品的数据
    getRecommendData() {
      var _self = this;
      getRecommendData()
        .then(res => {
          _self.detailRecommend = res.data.list;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 根据商品id获取详情数据
    getDetailData(id) {
      getDetailData(id).then(res => {
        console.log(res);
        let data = res.result;
        this.detailInfo = data;
        // 获取详情页轮播信息
        this.detailBanner = data.itemInfo.topImages;
        // 获取详情页商品简洁信息
        this.detailGoodsInfo = new Goodsinfo(
          data.columns,
          data.itemInfo,
          data.shopInfo.services
        );
        // 获取详情页店铺信息
        this.detailShopInfo = new Shopinfo(data.shopInfo);
        // 获取详情页图片信息
        this.detailImage = data.detailInfo.detailImage;
        this.detailImageDesc = data.detailInfo.desc;
        // 获取详情页商品参数信息
        this.detailItemParams = data.itemParams;
        // 获取详情页用户评论信息
				this.detailRate = "list" in data.rate ? data.rate.list[0] : {};
				// 关于商品加购需要的数据
				this.addCartsfo = new AddcartInfo(res.iid,data.itemInfo)
      });
    },
    // 获取详情页标题对应的组件位置
    getTitleLocation(arr) {
      let _self = this;
      arr.length = 0;
      arr[0] = 0;
      arr[1] = _self.$refs.params.$el.offsetTop;
      arr[2] = _self.$refs.rate.$el.offsetTop;
      arr[3] = _self.$refs.list.$el.offsetTop;
      _self.titleSwitchYs = arr;
    },
    // 点击标题头跳到对应的位置
    titleSwitch(index) {
      this.$refs.bScroll.scrollTo(0, -this.titleSwitchYs[index]);
    },
    // 监听图片加载完
    detailImgLoad() {
      if (this.detailSwiperImgLoad()) {
				this.getTitleLocation(this.titleSwitchYs);
				this.titles =['商品','参数','评论','推荐']
      }
    },
    // 监听轮播的图片加载完
    detailSwiperImgLoad() {
      return true;
    },
    // 获取bs滚动的位置 ,然后改变title的颜色
    getPosition(position) {
			// // 当滚动到推荐位置时，改变titles的内容
			// console.log(this.$refs.params.$el.offsetTop)
			// if(this.$refs.params.$el.offsetTop<-position.y){
			// 	this.getTitleLocation(this.titleSwitchYs);
			// 	console.log(this.titleSwitchYs)
			// }
      // 当滚动距离页面顶部超过1000显示返回顶部按钮
      this.backIsshow = -position.y > 1000;
      // console.log(-position.y);
      let arr = this.titleSwitchYs;
      for (let i in arr) {
        // 因为i是字符串类型，所以要转换
        if (this.titleCurrentIndex !== i) {
          if (i < arr.length - 1) {
            if (-position.y >= arr[i] && -position.y < arr[parseInt(i) + 1]) {
              this.titleCurrentIndex = i;
              this.$refs.top.currentTitle = this.titleCurrentIndex;
            }
          } else {
            if (-position.y >= arr[i]) {
              this.titleCurrentIndex = i;
              this.$refs.top.currentTitle = this.titleCurrentIndex;
            }
          }
        }
      }
    },

    // 返回顶部的方法
    backTop() {
      this.$refs.bScroll.scrollTo(0, 0, 1000);
    }
  },
  mounted() {
    // 请求详情页推荐商品的数据
    this.getRecommendData();
    this.iid = this.$route.params.iid;
    // 根据商品id获取详情数据
    this.getDetailData(this.iid);
  },
  destroyed() {
    this.$bus.$off("itemImgLoad", this.itemImgListenerLoad);
  }
};
</script>

<style scoped>


.ZLdetails {
  height: 100vh;
  position: relative;
}
.ZLdetailsTop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
}
.ZLscroll {
  height: calc(100% - 44px - 50px);
  margin-top: 44px;
}
/* 返回顶部按钮css */
.homeBacktop {
  position: fixed;
  bottom: 52px;
  right: 4px;
  z-index: 999;
}
</style>
